<template>
  <div id="app">
    <h1>来看看</h1>
    <router-link :to="'/hahaha/'+world">hahaha</router-link>
    <router-link to="/Son2">son2</router-link>
    <button @click="fun1">编程式路由1</button>
    <button @click="fun2">编程式路由2</button>
    <br>
    <router-link to="/Son3">son3</router-link>
    <button @click="fun3">编程式路由3</button>
    <hr>
    <router-link to="/Fu">fu</router-link>
    <router-link to="/Fu/FuSon">FuSon</router-link>

    <!-- 设置路径视图,用于显示路径路径相关的组件所生产的页面  -->
    <router-view/>
<!--    <input type="text" v-model="world">-->
  </div>
</template>

<script>

  export default {
    name: 'App',
    components: {},
    data() {
      return {
        world:"",
        e:{
          ename:"zs",
          age:18
        }
      }
    },
    methods: {
      fun1(){
        this.$router.push("/hahaha/"+this.world)
      },
      fun2(){
        // 会在history
        // this.$router.push("/Son2")
        // 不会记录在history里面
        this.$router.replace("/Son2")
      },
      fun3(){
        this.$router.push({
          name:"Son3", //使用 路由设置的name进行页面切换
          params:{ //参数 不会再路径上显示参数
          // query:{ //参数  会在路径上显示参数
            msg:"这个是son3",
            emp:this.e
          }
        })
      }
    }
  }
</script>

<style>
  #app {
    font-family: 'Avenir', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
    margin-top: 60px;
  }
</style>
